import React, { Component } from 'react'
import { connect } from 'dva';
import { Form, Input, Button, message } from 'antd';
import { FormComponentProps } from "antd/lib/form/Form";
import { SearchRow, SearchCol } from '@/styled/form';

interface Props extends FormComponentProps {
  dispatch?: Function,
  data?: {
    id: number
  },
  keys?: Array<string>,
  onCancel?: Function,
  onSubmit?: Function,
  firstPwdText?: String,
}

@connect()
class PasswordForm extends Component<Props, any> {
  state = {
    confirmDirty: false,
    canSubmit: false,
  }

  validateToNextPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && this.state.confirmDirty) {
      form.validateFields(['confirm'], { force: true });
    }
    callback();
  }

  compareToFirstPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && value !== form.getFieldValue('newPassword')) {
      callback('两次输入的密码不一致');
    } else {
      callback();
    }
  }

  handleConfirmBlur = (e) => {
    const value = e.target.value;
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  }

  clearFormValue = () => {

    this.props.form.setFieldsValue({
      password: '',
      newPassword: '',
      confirm: ''
    });
  }

  logout = () => {
    const { dispatch } = this.props;
    sessionStorage.clear();
    dispatch({
      type: 'user/logout',
    });
  };
  //失去焦点判断
  validatePassword= (e) => {
    const { dispatch, form } = this.props;
    const oldPassword = form.getFieldValue('password');
    dispatch({
      type: 'user/modifyPwd',
      payload: {
        oldLoginPwd: oldPassword,
        newLoginPwd: oldPassword
      },
    })
      
  }
  submit = () => {
    const { form, dispatch, onSubmit } = this.props;
    const oldPassword = form.getFieldValue('password');
    const newPassword = form.getFieldValue('newPassword');
    const confirmPassword = form.getFieldValue('confirm');
    if (newPassword === oldPassword) {
      message.warning('输入的新密码与原密码一致', 5);
    } else if (newPassword !== confirmPassword) {
      message.warning('两次输入的密码不一致', 5);
    } else {
      dispatch({
        type: 'user/modifyPwd',
        payload: {
          oldLoginPwd: oldPassword,
          newLoginPwd: newPassword
        },
      })
        .then(() => {
          onSubmit();
          setTimeout(() => {
            this.logout();
          }, 1000)
        })
    }
  }

  render() {
    const { getFieldDecorator } = this.props.form;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    return (
      <Form {...formItemLayout}>
        <SearchRow>
          <SearchCol span={24}>
            <Form.Item label={this.props.firstPwdText || "原密码"}>
              {getFieldDecorator('password', {
                rules: [
                  {
                    required: true,
                    message: '请输入原密码',
                  },
                ],
              })(<Input onBlur={this.validatePassword} />)}
            </Form.Item>
          </SearchCol>
          <SearchCol span={24}>
            <Form.Item label="新密码">
              {getFieldDecorator('newPassword', {
                rules: [
                  {
                    required: true,
                    message: '请输入新密码',
                  },
                  {
                    validator: this.validateToNextPassword,
                  },
                ],
              })(<Input.Password />)}
            </Form.Item>
          </SearchCol>
          <SearchCol span={24}>
            <Form.Item label="再次确认">
              {getFieldDecorator('confirm', {
                rules: [
                  {
                    required: true,
                    message: '请再次确认新密码',
                  },
                  {
                    validator: this.compareToFirstPassword,
                  },
                ],
              })(<Input.Password onBlur={this.handleConfirmBlur} />)}
            </Form.Item>
          </SearchCol>
          
        </SearchRow>
        <SearchRow type='flex' justify="end">
            {this.props.onCancel ? <Button type="default" onClick={() => {
              this.clearFormValue();
              this.props.onCancel();
            }}>
              取消
          </Button> : null}
            <Button type="primary" style={{ marginLeft: 30 }} onClick={() => {
              this.submit();
            }}>
              确定
          </Button>
          </SearchRow>
      </Form>
    )
  }
}
const ChangePassword = Form.create<Props>()(PasswordForm);
export default ChangePassword;